<!--
 * @Author: your name
 * @Date: 2022-01-07 17:48:20
 * @LastEditTime: 2022-01-09 14:54:28
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \homepage\src\views\index.vue
-->
<template>
  <div class="bg">
    <Header />
    <el-container>
      <el-main>
        <el-carousel indicator-position="none">
          <el-carousel-item v-for="(item, index) in list_img" :key="index">
            <h3 class="small">
              <img :src="item.url" alt="" />
            </h3>
          </el-carousel-item>
        </el-carousel>

        <div class="search">
          <!-- <el-button @click="searchFn">搜索</el-button>
          <el-input
            placeholder="请输入想搜索的地区"
            suffix-icon="el-icon-search"
            v-model="keyword"
          >
          </el-input> -->
          <div class="time">
            <span class="data">
              <p style="font-size: 80px">{{ nowTime }}</p>
              <p style="font-size: 30px">{{ nowDate }}</p>
            </span>
          </div>
          <el-row>
            <el-col
              :span="6"
              style="float: left; margin-left: 0vw; width: 350px; hight: 40px"
            >
              <el-input
                placeholder="请输入想搜索的地区"
                type="text"
                style="width: 400px; cursor: pointer"
                v-model="keyword"
                @keyup.enter.native="searchFn"
              >
                <i
                  slot="suffix"
                  class="el-input__icon el-icon-search"
                  @click="searchFn"
                ></i>
              </el-input>
            </el-col>
          </el-row>
        </div>
      </el-main>

      <Footer />
    </el-container>
  </div>
</template>

<script>
import { getPropertyList } from "@/api/property";

export default {
  name: "Swiper",
  data() {
    return {
      keyword: "",
      timer: null,
      nowWeek: "",
      nowDate: "",
      nowTime: "",
      list_img: [
        { url: require("../assets/city2.jpg.jpg") },
        { url: require("../assets/city3.jpg.jpg") },
        { url: require("../assets/city1.jpg.jpg") },
        { url: require("../assets/city4.jpg.jpg") },
      ],
    };
  },
  created() {
    getPropertyList();

    // console.log(getPropertyList());
  },
  mounted() {
    let _this = this;
    this.timer = setInterval(() => {
      this.setNowTimes();
    }, 1000);
  },
  computed: {
    isSearch() {
      return this.isFocus;
    },
    isHistorySearch() {
      return this.isFocus && !this.search; //获取了焦点并且搜索框内容为空显示热门搜索和历史搜索
    },
    isSearchList() {
      return this.isFocus && this.search; //获取了焦点并且搜索框内容不为空直接显示搜索列表
    },
  },
  methods: {
    searchFn() {
      if (!this.keyword) {
        this.$message.warning("搜索内容不能为空");
        return;
      }
      // console.log(this.keyword);
      this.$router.push(`/property/?title_contains=${this.keyword}`);
    },
    setNowTimes() {
      let myDate = new Date();
      // console.log(myDate)
      let wk = myDate.getDay();
      let yy = String(myDate.getFullYear());
      let mm = myDate.getMonth() + 1;
      let dd = String(
        myDate.getDate() < 10 ? "0" + myDate.getDate() : myDate.getDate()
      );
      let hou = String(
        myDate.getHours() < 10 ? "0" + myDate.getHours() : myDate.getHours()
      );
      let min = String(
        myDate.getMinutes() < 10
          ? "0" + myDate.getMinutes()
          : myDate.getMinutes()
      );
      let sec = String(
        myDate.getSeconds() < 10
          ? "0" + myDate.getSeconds()
          : myDate.getSeconds()
      );
      let weeks = [
        "星期日",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
      ];
      let week = weeks[wk];
      this.nowDate = yy + "年" + mm + "月" + dd + "日";
      this.nowTime = hou + ":" + min + ":" + sec;
      this.nowWeek = week;
    },
  },
};
</script>

<style lang='less' scoped>
.data {
  display: block;
  font-weight: 600;
  color: #fff;
  text-align: center;
  p {
    display: block;
    margin: 0;
    // line-height: 200px;
  }
}
.time {
  width: 400px;
  height: 140px;
  margin-bottom: 20px;
}
.bg {
  overflow: hidden;
}
.el-main {
  padding: 0;
}
.content {
  margin: 0 auto;
  width: 100%;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 1;
  line-height: 300px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.small img {
  width: 100%;
  height: 100%;
}

/deep/.el-carousel__container {
  // width: 1226px;
  height: 900px !important;
}

.search {
  position: absolute;
  top: 30%;
  left: 50%;
  z-index: 999;
  transform: translate(-50%, -50%);
}
el-button {
  background-color: #ccc;
  border-radius: none;
}
/deep/.el-input {
  position: relative;
  font-size: 14px;
  display: block;
  width: 500px;
  .el-icon-search {
    font-size: 18px;
    font-weight: 700;
    color: #000;
  }
}
</style>
